import React from 'react';

import { useNavigate, Link } from 'react-router-dom';
import './logincode.css'
import { Toast } from 'antd-mobile'
function Logincode() {
    let navigate = useNavigate();
    let [flags, editFlag] = React.useState(true)
    let [passwords, editPass] = React.useState('')
    let [phones, editphone] = React.useState('')
    // 勾选服务协议
    const ready = () => {
        editFlag(!flags)
    }

    // 输入框内容
    const inputChnage = (e) => {
        e.persist()
        let name = e.target.name
        console.log(e.target.name);
        if (name == 'phone') {
            console.log('触发');
            editphone(e.target.value)
        } else if (name == 'password') {
            editPass(e.target.value)
        }

    }

    // 获取验证码
    const getPass = () => {

        let reg =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        //   let pass = /^[a-zA-Z0-9]\w{8,17}$/;

        if (!reg.test(phones)) {
            //不正确处理
            Toast.show("请输入正确手机号码");
            return;
        } else if (
            phones != window.localStorage.getItem("userId")
        ) {
            //不正确处理
            Toast.show({
                content: '该手机号码暂未注册',
                afterClose: () => {
                    console.log('after')
                },
            })
            return;
        }
        else {
            Toast.show("获取验证码成功");

        }

    }

    const submit = () => {
        let reg =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        //   let pass = /^[a-zA-Z0-9]\w{8,17}$/;

        if (!reg.test(phones)) {
            //不正确处理
            Toast.show("请输入正确手机号码");
            return;
        } else if (
            phones != window.localStorage.getItem("userId")
        ) 
        if (passwords != '123456') {
            Toast.show({
                content: '请输入正确的验证码',
                afterClose: () => {
                    console.log('after')
                },
            })
            return;
        }
        if (!flags) {
            window.localStorage.setItem("token", "token值");
            Toast.show({
                content: '登陆成功',
                afterClose: () => {
                    console.log('after')
                },
            })
            navigate("/");
        } else {
            Toast.show({
                content: '请同意用户协议',
                afterClose: () => {
                    console.log('after')
                },
            })
        }
    }


    return (
        <div className='logincode'>
            <div className="login">
                <div className="head">
                    <i onClick={() => navigate('/my')} className="iconfont icon-zuobian"></i>
                    <Link to={'/loginpass'} className="islogin">账号登录</Link>
                    <div className='bold'>验证码登录</div>
                </div>
                <div className="fx login-int">
                    <div style={{ marginRight: '10px' }}>+86</div>
                    <div className="width-100" style={{ position: 'relative' }}>
                        <input
                            type="text"
                            placeholder="输入手机号"
                            className="width-100"
                            name='phone'
                            value={phones}
                            onChange={inputChnage}
                        />
                    </div>
                </div>
                <div className="fx login-int" style={{ marginTop: '20px' }}>
                    <div className="width-100" style={{ position: 'relative' }}>
                        <input
                            type="text"
                            placeholder="请输入验证码"
                            className="width-100"
                            name='password'
                            value={passwords}
                            onChange={inputChnage}
                        />
                    </div>
                    <div className="btn-verify">
                        <input type="button" className="get-num" onClick={getPass} value="获取验证码" />
                    </div>
                </div>
                <div className="user-agreement">
                    <div className="forget-pass">
                        <div>
                            <p>没有账号? 去</p>
                            <Link to="/loginregister"

                                style={{ marginLeft: '5px', fontWeight: '800', color: '#000' }}
                            >注册</Link>
                        </div>
                        <Link to={"/loginforget"} tag="p">忘记密码</Link>
                    </div>
                    <div className="phone-login" onClick={submit} >验证码登录</div>
                    <div className="agree">
                        <div className="img" onClick={ready}>
                            {
                                flags ? (<img src="../assets/img/weiv.png" className="isImg" />) : (<img src="../assets/img/yiv.png" className="isImg" />)
                            }



                        </div>
                        <div style={{ display: 'flex', position: 'relative' }}>
                            <p>已阅读并同意</p>
                            <p className="c-ff">《用户协议》</p>
                            <p>和</p>
                            <p className="c-ff">《隐私政策》</p>
                        </div>
                    </div>
                </div >
            </div >
        </div >
    )

}

export default Logincode;